<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>所有供应商及商品</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>

</head>
<body>
<div id="app">
    <el-dialog :visible.sync="dialogFormVisible" >
        <template :data="pro">
            <el-descriptions title="商品信息" ref="desc">
            <el-descriptions-item label="商品名称">{{pro.pname}}</el-descriptions-item>
            <el-descriptions-item label="商品图片">{{pro.pimg}}</el-descriptions-item>
            <el-descriptions-item label="商品价格">{{pro.pprice}}</el-descriptions-item>
            <el-descriptions-item label="商品类型">
                <el-tag size="small">{{ pro.aaa }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="商品规格">{{pro.company}}</el-descriptions-item>
            <el-descriptions-item >
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="cancel()">返 回</el-button>
                </div></el-descriptions-item>
            </el-descriptions>
        </template>
    </el-dialog>
    <el-dialog :visible.sync="dialogTableVisible" >
        <el-form :model="pro">
            <el-form-item label="商品名称" :label-width="formLabelWidth">
                <el-tag  autocomplete="off">{{pro.pname}}</el-tag>
            </el-form-item>
            <el-form-item label="商品类型" :label-width="formLabelWidth">
                <el-tag  autocomplete="off">{{pro.aaa}}</el-tag>
            </el-form-item>
            <el-form-item label="商品数量" :label-width="formLabelWidth">
                <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
            </el-form-item>
            <el-form-item label="商品单价" :label-width="formLabelWidth">
                <el-tag  autocomplete="off">{{pro.pprice}}</el-tag>
            </el-form-item>
            <el-form-item label="总计" :label-width="formLabelWidth">
                <el-tag  autocomplete="off">{{pro.pprice*num}}</el-tag>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="buyPro">确定购买</el-button>
        </div>
    </el-dialog>
    <el-container>
        <el-aside width="200px">
            <el-tree
                    :data="trees"
                    node-key="id"
                    ref="tree"
                    highlight-current
                    :props="defaultProps">
            </el-tree>
        </el-aside>
        <el-main>
            <el-table
                    ref="productTable"
                    :data="pros"
                    style="width: 100%">
                <el-table-column
                        width="55">
                </el-table-column>
                <el-table-column
                        label="商品编号">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.pnumber }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="商品名称">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px"><el-tag type="success">{{ scope.row.pname }}</el-tag></span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="商品图片">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.pimg }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="商品图片">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.pprice }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="商品类型">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.ttype.productType }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="商品规格">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.company }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="loadPro(scope.$index, scope.row)">查看详情</el-button>
                        <el-button @click="loadOrder(scope.$index, scope.row)">订   购</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="size"
                    :current-page="current"
                    @current-change="loadPros">
            </el-pagination>
        </el-main>
    </el-container>
</div>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                trees:[],//树形图
                pros:[],//商品信息
                order:{id:"",orderId:"",productId:"",customId:"",number:"",money:"",
                        payType:"",dealTime:"",orderStatus:""},
                num:'',
                pro: [],
                dialogFormVisible:false,
                dialogTableVisible:false,
                current:1,
                total:0,
                size:10,
                defaultProps: {
                    children: 'types',
                    label: 'companyName'
                }
            }
        },
        methods:{
            //加载树形图
            loadTree(){
                axios.get("/companys").then(res=>{
                    this.trees=res.data
                    this.trees.forEach(com=>{
                        com.types.forEach(ty=>{
                            ty['companyName']=ty.productType
                            ty['types']=ty.products
                            ty.products.forEach(pro=>{
                               pro['companyName']=pro.pname
                            })
                        })
                    })
                })
            },
            //加载商品信息
            loadPros(current){
                let size=this.size
                axios.get("/products/"+current+"/"+size).then(res=>{
                    this.pros=res.data.records;
                    this.total = res.data.total;
                    this.current = res.data.current;
                })
            },
            //加载商品详情
            loadPro(index,row){
                axios.get("/product/"+row.id).then(res=>{
                    this.pro=res.data
                    this.pro.aaa=this.pro.ttype.productType
                    this.dialogFormVisible=true
                })
            },
            //加载订单
            loadOrder(index,row){
                this.dialogTableVisible=true;
                this.pro=JSON.parse(JSON.stringify(row))
                this.num=1
                this.pro.aaa=this.pro.ttype.productType
                this.pro.cname='史明泽'
            },
            buyPro(){
                this.order["productId"]=this.pro.id
                this.order["number"]=this.num
                this.order.number = this.num;
                this.order["money"]=this.pro.pprice
                this.order["type"]=this.pro.aaa
                this.dialogTableVisible=false
                console.log(this.order)
                axios.post("/tOrder",this.order).then(res=>{
                       if (res.data == "ok"){
                           this.$message({
                               message: '恭喜你，支付成功！',
                               type: 'success'
                           });
                       }
                })

            },
            cancel(){
                this.dialogFormVisible=false
                this.dialogTableVisible=false;
            }
        },
        mounted(){
            this.loadTree()
            this.loadPros(1)
        }
    })
</script>
</body>
</html>